<template>
	<view>
		<view class="header">
			<view class="head">
				<view class="headportrait"></view>
				<view class="userName">龙宗优选</view>
			</view>
			<view class="days">
				<view v-for="(val, i) in dayslist" :key="val.id" @click="toggle(val.id)" :class="isShow == val.id ? 'active' : ''">{{val.title}}</view>
<!-- 				<view>今天</view>
				<view>7天</view>
				<view>30天</view> -->
			</view>
			<view class="payment">
				<view class="text">
					<text>30天付款金额</text>
				</view>
				<view class="money">
					¥<text>0</text>
				</view>
			</view>
			<!-- 付款买家 -->
			<view class="buyer">
				<view class="buyer_left">
					<view class="num">30</view>
					<view class="pay">30天付款买家</view>
				</view>
				<view class="buyer_right">
					<view class="num">30</view>
					<view class="pay">30天付款订单</view>
				</view>
			</view>
		</view>
		<view class="administration">
			<view class="adminicon">
				<view class="icon-img">
					<image src="../../../static/selecthome.png"></image>
				</view>
				<view class="text">
					<text>会员管理</text>
				</view>
			</view>
			<view class="adminicon">
				<view class="icon-img">
					<image src="../../../static/selecthome.png"></image>
				</view>
				<view class="text">
					<text>订单管理</text>
				</view>
			</view>
			<view class="adminicon">
				<view class="icon-img">
					<image src="../../../static/selecthome.png"></image>
				</view>
				<view class="text">
					<text>产品管理</text>
				</view>
			</view>
			<view class="adminicon">
				<view class="icon-img">
					<image src="../../../static/selecthome.png"></image>
				</view>
				<view class="text">
					<text>扫码核销</text>
				</view>
			</view>
		</view>
		<tabbar @selectTabbar="selectTabbar" ref="tabbar"></tabbar>
	</view>

</template>

<script>
	import tabbar from '@/components/tabBar-admin/tabBar.vue'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				isShow:4,
				dayslist:[
					{
						id:1,
						title: '昨天',
					},
					{
						id:2,
						title: '今天',
					},
					{
						id:3,
						title: '7天',
					},
					{
						id:4,
						title: '30天',
					},
				]
			}
		},
		onShow() {
			this.$refs.tabbar.current = 0
		},
		methods: {
			// 切换tabbar
			selectTabbar(e) {
				console.log(e)
				console.log(e.pagePath);
				uni.redirectTo({
					url: e.pagePath
				});
			},
			toggle(val){
				this.isShow = val
			}
		}
	}
</script>

<style lang="less">
page{
	background-color: #F2F2F2;
}
.header{
	background-color: #E5705C;
	padding: 20rpx;
	padding-bottom: 100rpx;
	position: relative;
	.head{
		display: flex;
		align-items: center;
		// padding: 20rpx;
		.headportrait{
			width: 112rpx;
			height: 112rpx;
			background-color: #D9D9D9;
			border-radius: 50%;
		}
		.userName{
			font-size: 32rpx;
			font-weight: 700;
			color: #fff;
			margin-left: 15rpx;
		}
	}
	.days{
		display: flex;
		border: 1px solid #fff;
		border-radius: 15rpx;
		text-align: center;
		color: #fff;
		margin-top: 25rpx;
		view{
			flex: 1;
			border-right:1px solid #fff;
			padding: 15rpx 0;
			font-size: 32rpx;
			font-weight: 400;
			&:last-child{
				border-right:none;
			}
		}
	}
	.payment{
		color: #fff;
		margin-top: 15rpx;
		.text{
			font-size: 32rpx;
		}
		.money{
			font-size: 52rpx;
			text{
				font-size: 80rpx;
				margin-left: 15rpx;
			}
		}
	}
	.buyer{
		position: absolute;
		left: 50%;
		bottom: -80rpx;
		transform: translateX(-50%);
		text-align: center;
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		align-items: center;
		height: 172rpx;
		width: 90%;
		padding: 14px 0;
		box-sizing: border-box;
		>view{
			flex: 1
		}
		.buyer_left,
		.buyer_right{
			.num{
				color: #EE724F;
				font-size: 40rpx;
				font-weight: 400;
			}
			.pay{
				color: #999999;
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		
		}
		.buyer_left{
			border-right: 1px solid #A6A6A6;
		}
	}
}
.administration{
	width: 90%;
	height: 186rpx;
	background-color: #fff;
	margin: 120rpx auto;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	.adminicon{
		flex: 1;
		text-align: center;
		.icon-img{
			width: 50rpx;
			height: 44rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
				margin: 0 auto;
			}
		}
		.text{
			font-family: 'PingFang SC';
			font-size: 24rpx;
			font-weight: 700;
			margin-top: 25rpx;
		}
	}
}
.active{
	background-color: #fff;
	color: #E77966;
}
</style>
